<template>
  <div id="detail">
    <detailnavbar
      class="detail-navbar"
      @titleClick="titleClick"
      ref="navbar"
    ></detailnavbar>
    <scroll
      class="content"
      ref="scroll"
      :probeType="3"
      @homescroll="showNavbar"
    >
      <Swiper class="swipe">
        <SwiperItem v-for="(item, index) in topImages" :key="index">
          <img :src="item" alt="" />
        </SwiperItem>
      </Swiper>
      <detailBaseInfo :goods="goods"></detailBaseInfo>
      <detailShopInfo :shop="shop"></detailShopInfo>
      <detailGoodsInfo
        :detailInfo="detailInfo"
        @imageLoad="imageLoad"
      ></detailGoodsInfo>
      <detailParamInfo :paramInfo="paramInfo" ref="param"></detailParamInfo>
      <detailCommentInfo
        :commentInfo="commentInfo"
        ref="comment"
      ></detailCommentInfo>
      <goodsList :goods="recommends" ref="recommend"></goodsList>
    </scroll>
    <detailBottomBar @addToCart="addToCart"></detailBottomBar>
    <backtop @click="backTopClick" v-show="backTopIsShow"></backtop>
    <toast :message="message" :isShow="toastIsShow"></toast>
  </div>
</template>

<script>
import detailnavbar from "./components/detailnavbar.vue";
import {
  getDetail,
  goods,
  shop,
  goodsParam,
  getRecommend
} from "network/detail.js";
//引入网络请求，请求需要的数据
import { Swiper, SwiperItem } from "components/common/swiper/swiperindex.js";
//轮播图
import detailBaseInfo from "./components/detailBaseInfo.vue";
//基本描述
import detailShopInfo from "./components/detailShopInfo.vue";
//商家描述
import scroll from "components/common/scroll/scroll.vue";
//引入封装好的better-scroll
import detailGoodsInfo from "./components/detailGoodsInfo.vue";
//商品细节
import detailParamInfo from "./components/detailParamInfo.vue";
//商品参数
import detailCommentInfo from "./components/detailCommentInfo.vue";
//评论展示
import goodsList from "components/content/goods/goodsList.vue";
//推荐
import detailBottomBar from "./components/detailBottomBar.vue";
//底部工具栏
import backtop from "components/content/backTop/backtop.vue";
//回到顶部按钮
import toast from "components/common/toast/toast.vue";
//引入弹窗

export default {
  name: "detail",
  components: {
    detailnavbar,
    Swiper,
    SwiperItem,
    detailBaseInfo,
    detailShopInfo,
    scroll,
    detailGoodsInfo,
    detailParamInfo,
    detailCommentInfo,
    goodsList,
    detailBottomBar,
    backtop,
    toast
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopYs: [],
      currentIndex: 0,
      backTopIsShow: false,
      message: "",
      toastIsShow: false
    };
  },
  created() {
    this.iid = this.$route.params.iid;
    //请求详情数据
    getDetail(this.iid).then(res => {
      const data = res.result;
      this.topImages = data.itemInfo.topImages;
      //轮播图数据
      this.goods = new goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      //基本描述数据
      this.shop = new shop(data.shopInfo);
      //商家描述数据
      this.detailInfo = data.detailInfo;
      //商品细节数据
      this.paramInfo = new goodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      //商品参数数据
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list;
      }
      //商品评论数据
      // this.$nextTick(()=>{
      // 	this.themeTopYs = []
      // 	this.themeTopYs.push(0)
      // 	this.themeTopYs.push(this.$refs.param.$el.offsetTop)
      // 	this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      // 	this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      // 	console.log(this.themeTopYs);
      // })
      //这里获取的数值不对，图片加载
    });
    //请求推荐数据
    getRecommend().then(res => {
      this.recommends = res.data.list;
    });
  },

  methods: {
    imageLoad() {
      this.$refs.scroll.scroll.refresh();
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.param.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
      this.themeTopYs.push(Number.MAX_VALUE);
    },
    titleClick(index) {
      this.$refs.scroll.scroll.scrollTo(0, 44 - this.themeTopYs[index], 500);
    },
    showNavbar(position) {
      let length = this.themeTopYs.length;
      let positionY = -position.y;
      for (let i = 0; i < length - 1; i++) {
        if (
          this.currentIndex != i &&
          positionY >= this.themeTopYs[i] - 44 &&
            positionY < this.themeTopYs[i + 1] - 44
        ) {
          this.currentIndex = i;
          this.$refs.navbar.currentIndex = this.currentIndex;
        }
      }
      this.backTopIsShow = position.y < -1000;
    },
    backTopClick() {
      this.$refs.scroll.scroll.scrollTo(0, 0, 500);
    },
    addToCart() {
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      product.isChecked = true;
      this.$store.dispatch("addCart", product).then(res => {
        // console.log(res);
        this.message = res;
        this.toastIsShow = true;
        setTimeout(() => {
          this.toastIsShow = false;
        }, 1500);
      });
    }
  }
};
</script>

<style scoped>
.swipe {
  height: 300px;
  overflow: hidden;
}
#detail {
  position: relative;
  z-index: 9;
  background-color: #ffffff;
  height: 100vh;
}
.content {
  height: calc(100% - 44px);
}
.detail-navbar {
  position: relative;
  z-index: 9;
}
</style>
